<!DOCTYPE html>
<html>
 <head> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="msapplication-tap-highlight" content="no">
   <style>
    
     .op{    
      height: 100px;
      position: fixed;
      left: 0;
      bottom: 0;
      z-index: 9999999999999999;
      width: 100%;
      display: flex;
      justify-content: center;
     }
     .op .plus{
       width:90px;
       height:90px;
       overflow:hidden;
     }
     .op .plus img{
       transform: scale(12);
     }
     .op .minus{
       width:90px;
       height:90px;
       overflow:hidden;
     }
     .op .minus img{
       transform: scale(12);
     }
   </style>
 </head> 
 <body style="overflow:hidden;background:#50a6c1;cursor:move;"> 
  
    <div id="left-top" style="position: fixed;left: 0;top: 0;z-index: 10000000;width: 200px;margin:20px;">
      <img src="logo-left-top.png" style="width: 100%;height: 100%;"/>
    </div>
    <div id="right-bottom" style="position: fixed;right: 0;bottom: 0;z-index: 10000000;width: 149px;height: 100px;">
      <img src="logo-right-bottom.svg" style="width: 100%;height: 100%;transform: scale(4.5);"/>
    </div>



  <!-- <body style="overflow:hidden;background:black;">   -->
  <div id="back"> 
   <img src="back.jpg" style="width:100%;height: 100%;" /> 

   <div style="color:white;left:59%;top:42%;position:absolute;width:0px;height:0px;background: red;"> 
    <div onclick="goUrl('https://720yun.com/t/48vktlp9sih')" style="position:absolute;left:50%;top:-40px;white-space: nowrap;transform: translate(-50%,-50%) scale(0.6);padding:5px 10px;cursor:pointer;"> 
     <img src="hubeiguangbodianshitaiguan.svg" style="width:200px;" /> 
    </div> 
    <img class="ball-ani" src="icon1.png" style="position: absolute;width: 20px;height: 20px;left: 0;top: 0;transform: translate(-50%,-50%);" /> 
  </div> 

   <div style="color:white;left:40%;top:33%;position:absolute;width:0px;height:0px;background: red;"> 
    <div onclick="goUrl('https://720yun.com/t/4evktlp901b')" style="position:absolute;left:50%;top:-40px;white-space: nowrap;transform: translate(-50%,-50%) scale(0.7);padding:5px 10px;cursor:pointer;"> 
     <img src="hubeiribaochuanmeijituanguan.svg" style="width:200px;" /> 
    </div> 
    <img class="ball-ani" src="icon1.png" style="position: absolute;width: 20px;height: 20px;left: 0;top: 0;transform: translate(-50%,-50%);" /> 
   </div> 

   <div style="color:white;left:64%;top:33%;position:absolute;width:0px;height:0px;background: red;"> 
    <div onclick="goUrl('https://720yun.com/t/07vktlp9sfl')" style="position:absolute;left:50%;top:-40px;white-space: nowrap;transform: translate(-50%,-50%) scale(1.3);padding:5px 10px;cursor:pointer;"> 
     <img src="hubeishengguangbodianshihewangluoshiting.svg" style="width:200px;" /> 
    </div> 
    <img class="ball-ani" src="icon1.png" style="position: absolute;width: 20px;height: 20px;left: 0;top: 0;transform: translate(-50%,-50%);" /> 
   </div> 

   <div style="color:white;left:67%;top:47%;position:absolute;width:0px;height:0px;background: red;"> 
    <div onclick="goUrl('https://720yun.com/t/43vktlp9Odm')" style="position:absolute;left:50%;top:-40px;white-space: nowrap;transform: translate(-50%,-50%);padding:5px 10px;cursor:pointer;"> 
     <img src="hubeishengquyiwenyi.svg" style="width:200px;" /> 
    </div> 
    <img class="ball-ani" src="icon1.png" style="position: absolute;width: 20px;height: 20px;left: 0;top: 0;transform: translate(-50%,-50%);" /> 
   </div> 

   
   <div style="color:white;left:27%;top:36%;position:absolute;width:0px;height:0px;background: red;"> 
    <div onclick="goUrl('https://720yun.com/t/a7vktl8y52y')" style="position:absolute;left:50%;top:-40px;white-space: nowrap;transform: translate(-50%,-50%);padding:5px 10px;cursor:pointer;"> 
     <img src="hubeishengxinwenchubanzongheguan.svg" style="width:200px;" /> 
    </div> 
    <img class="ball-ani" src="icon1.png" style="position: absolute;width: 20px;height: 20px;left: 0;top: 0;transform: translate(-50%,-50%);" /> 
   </div> 


   <div style="color:white;left:55%;top:55%;position:absolute;width:0px;height:0px;background: red;"> 
    <div onclick="goUrl('https://720yun.com/t/22vktlp9Of9')" style="position:absolute;left:50%;top:-40px;white-space: nowrap;transform: translate(-50%,-50%) scale(0.8);padding:5px 10px;cursor:pointer;"> 
     <img src="hubeichangjiangdianyingjituan.svg" style="width:200px;" /> 
    </div> 
    <img class="ball-ani" src="icon1.png" style="position: absolute;width: 20px;height: 20px;left: 0;top: 0;transform: translate(-50%,-50%);" /> 
   </div> 
   
   <div style="color:white;left:34%;top:40%;position:absolute;width:0px;height:0px;background: red;"> 
    <div onclick="goUrl('https://720yun.com/t/35vktlp9s7l')" style="position:absolute;left:50%;top:-40px;white-space: nowrap;transform: translate(-50%,-50%) scale(0.6);padding:5px 10px;cursor:pointer;"> 
     <img src="hubeizhiyinchuanmei.svg" style="width:200px;" /> 
    </div> 
    <img class="ball-ani" src="icon1.png" style="position: absolute;width: 20px;height: 20px;left: 0;top: 0;transform: translate(-50%,-50%);" /> 
   </div> 



   <div style="color:white;left:63%;top:61%;position:absolute;width:0px;height:0px;background: red;"> 
    <div onclick="goUrl('https://720yun.com/t/e6vktlp978y')" style="position:absolute;left:50%;top:-40px;white-space: nowrap;transform: translate(-50%,-50%) scale(1.2);padding:5px 10px;cursor:pointer;"> 
     <img src="hubeizhongtuchangjiangwenhua.svg" style="width:200px;" /> 
    </div> 
    <img class="ball-ani" src="icon1.png" style="position: absolute;width: 20px;height: 20px;left: 0;top: 0;transform: translate(-50%,-50%);" /> 
   </div> 

   <div style="color:white;left:34%;top:29%;position:absolute;width:0px;height:0px;background: red;"> 
    <div onclick="goUrl('https://720yun.com/t/b1vktlp9s2y')" style="position:absolute;left:50%;top:-40px;white-space: nowrap;transform: translate(-50%,-50%) scale(0.9);padding:5px 10px;cursor:pointer;"> 
     <img src="meitijiyizhuti.svg" style="width:200px;" /> 
    </div> 
    <img class="ball-ani" src="icon1.png" style="position: absolute;width: 20px;height: 20px;left: 0;top: 0;transform: translate(-50%,-50%);" /> 
   </div> 

   <div style="color:white;left:41%;top:22%;position:absolute;width:0px;height:0px;background: red;"> 
    <div onclick="goUrl('https://720yun.com/t/72vktlp9spe')" style="position:absolute;left:50%;top:-40px;white-space: nowrap;transform: translate(-50%,-50%) scale(0.75);padding:5px 10px;cursor:pointer;"> 
     <img src="shufabaoshe.svg" style="width:200px;" /> 
    </div> 
    <img class="ball-ani" src="icon1.png" style="position: absolute;width: 20px;height: 20px;left: 0;top: 0;transform: translate(-50%,-50%);" /> 
   </div> 

   <div style="color:white;left:38%;top:25%;position:absolute;width:0px;height:0px;background: red;"> 
    <div onclick="goUrl('https://720yun.com/t/2evktl8m7im')" style="position:absolute;left:50%;top:-40px;white-space: nowrap;transform: translate(-50%,-45%) scale(0.7);padding:5px 10px;cursor:pointer;"> 
     <img src="wuhanchubanjituan.svg" style="width:200px;" /> 
    </div> 
    <img class="ball-ani" src="icon1.png" style="position: absolute;width: 20px;height: 20px;left: 0;top: 0;transform: translate(-50%,-50%);" /> 
   </div> 

   
   <div style="color:white;left:48%;top:36%;position:absolute;width:0px;height:0px;background: red;"> 
    <div onclick="goUrl('https://720yun.com/t/05vktl1ws8y')" style="position:absolute;left:50%;top:-40px;white-space: nowrap;transform: translate(-50%,-50%) scale(0.20);padding:5px 10px;cursor:pointer;"> 
     <img src="wutai.svg" style="width:200px;" /> 
    </div> 
    <img class="ball-ani" src="icon1.png" style="position: absolute;width: 20px;height: 20px;left: 0;top: 0;transform: translate(-50%,-50%);" /> 
   </div> 


   <div style="color:white;left:46%;top:24%;position:absolute;width:0px;height:0px;background: red;"> 
    <div onclick="goUrl('https://720yun.com/t/12vktlp90rb')" style="position:absolute;left:50%;top:-40px;white-space: nowrap;transform: translate(-10%,-10%);padding:5px 10px;cursor:pointer;"> 
     <img src="changjaingchubanchuanmei.svg" style="width:200px;" /> 
    </div> 
    <img class="ball-ani" src="icon1.png" style="position: absolute;width: 20px;height: 20px;left: 0;top: 0;transform: translate(-50%,-50%);" /> 
   </div> 


   <div class="op">
     <div class="plus">
       <img src="plus.svg" onclick="clickScaleBig()" id="plus" />
     </div>
     <div class="minus">
      <img src="minus.svg" onclick="clickScaleSmall()" id="minus" />
     </div>
   </div>

  </div>  

  <script>
    var isPhone = false
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
      isPhone = true
    }
    if(isPhone){
      document.getElementById("right-bottom").style.display='none'
      document.getElementById("left-top").style.width = "48%"
    }
    

    //闪烁动画
    var i = 0;
    var imgs = ['icon1.png','icon2.png','icon3.png','icon4.png','icon5.png','icon5.png'
    ,'icon6.png','icon7.png','icon8.png','icon9.png','icon10.png','icon11.png','icon12.png'
    ,'icon13.png','icon14.png','icon15.png','icon16.png','icon17.png','icon18.png','icon19.png'
    ,'icon20.png','icon21.png','icon22.png','icon23.png','icon24.png','icon25.png']
    var imglength = imgs.length
    var aniTarget = document.getElementsByClassName("ball-ani");
    aniTarget = Array.from(aniTarget)
    console.log(aniTarget,'ani')
    function animation(){
      requestAnimationFrame(function(){
        if(i >= imglength) i = 0;
        aniTarget.map(item=>{
          item.src = imgs[i] 
        })
        i++
        animation()
      })
    }
    animation()

    var outerHeight = window.outerHeight
    var outerWidth = window.outerWidth
    console.log(outerWidth,outerHeight,'out')
    //初始化
    var width = outerWidth*0.9;
    var startLeft = outerWidth * 0.05;
    var startTop = outerHeight / 2 - width * 0.3;
    var heightPercentOfWidth = 0.6 //高度是长度的百分比
    var toBigPercent = 1.02 //放大的速度
    var toSmallPercent = 0.98  //缩小的速度
    if(isPhone){
      toBigPercent = 1.1
      toSmallPercent = 0.9
    }

    //状态数据
    var startX, startY;
    var buttonDown = false;
    var wheelDeltaStartX = 0;
    var wheelDeltaStartY = 0;

    var img = document.getElementById("back");
    img.style.position = "absolute"
    img.style.left = startLeft + 'px'
    img.style.top = startTop + 'px'
    img.style.width = width+"px"
    img.style.height = width*heightPercentOfWidth+"px"
    
    function clickScaleBig(){
      wheelDeltaStartX = outerWidth /2
      wheelDeltaStartY = outerHeight /2
      scaleBig()
    }

    function clickScaleSmall(){
      wheelDeltaStartX = outerWidth /2
      wheelDeltaStartY = outerHeight /2
      scaleSmall()
    }

    function scaleBig(){
      if(width > outerWidth * 4) return
      startLeft = ( startLeft - wheelDeltaStartX ) * toBigPercent  + wheelDeltaStartX
      startTop = (startTop - wheelDeltaStartY) * toBigPercent + wheelDeltaStartY
      width = width * toBigPercent;
      img.style.width = width+"px"
      img.style.height = width * heightPercentOfWidth + "px"
      img.style.left = startLeft + "px"
      img.style.top = startTop + "px"
    }

    function scaleSmall(){
      if(width < outerWidth / 2) return
      startLeft = ( startLeft - wheelDeltaStartX ) * toSmallPercent  + wheelDeltaStartX
      startTop = (startTop - wheelDeltaStartY) * toSmallPercent + wheelDeltaStartY
      width = width * toSmallPercent;
      img.style.width = width+"px"
      img.style.height = width * heightPercentOfWidth + "px"
      img.style.left = startLeft + "px"
      img.style.top = startTop + "px"
    }

    var scrollFunc = function (e) {  
      e = e || window.event;  
      wheelDeltaStartX = e.clientX
      wheelDeltaStartY = e.clientY
      console.log(e.clientX,e.clientY,'滚动的时候有位置嘛')
      if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件               
          if (e.wheelDelta > 0) { //当滑轮向上滚动时  
            scaleBig()
          }  
          if (e.wheelDelta < 0) { //当滑轮向下滚动时  
            scaleSmall()
          }  
      } else if (e.detail) {  //Firefox滑轮事件  
          if (e.detail> 0) { //当滑轮向下滚动时  
            scaleSmall()
          }  
          if (e.detail< 0) { //当滑轮向上滚动时  
            scaleBig() 
          }  
      }  
    } 
  /*IE、Opera注册事件*/
    if(document.attachEvent){
        document.attachEvent('onmousewheel',scrollFunc);

    }
    //Firefox使用addEventListener添加滚轮事件  
    if (document.addEventListener) {//firefox  
        document.addEventListener('DOMMouseScroll', scrollFunc, false);  
    }  
    //Safari与Chrome属于同一类型
    window.onmousewheel = document.onmousewheel = scrollFunc; 

    
    img.onmousedown = function(){
      return false;
    }
     document.onmousedown = function(event){
     // console.log(event)
        startX = event.clientX
        startY = event.clientY
        buttonDown = true
    }
    img.onmousemove = document.onmousemove = function(event){
        if(!buttonDown) return
        console.log(event.clientX,event.clientY)
        let diffX = event.clientX - startX
        let diffY = event.clientY - startY
        img.style.left = startLeft + diffX + 'px'
        img.style.top = startTop + diffY + 'px'
        console.log(startTop)
    }
    img.onmouseup = document.onmouseup = function(event){
      startLeft = parseInt(img.style.left.replace("px",""))
      startTop = parseInt(img.style.top.replace("px",""))
      buttonDown = false
    }
   
    function goUrl(url) {
      window.location.href=url
    }

    var doubleButtonDown = false
    var initDistance = 0
    if(isPhone){
      img.ontouchstart  = document.ontouchstart= function(event){
        if(event.touches.length > 1){
          wheelDeltaStartX = (event.touches[0].clientX + event.touches[1].clientX)/2
          wheelDeltaStartY = (event.touches[0].clientY + event.touches[1].clientY)/2
          initDistance = Math.pow((event.touches[1].clientX - event.touches[0].clientX),2) + Math.pow((event.touches[1].clientY-event.touches[0].clientY),2)
          doubleButtonDown = true
        }else{
          startX = event.touches[0].clientX
          startY = event.touches[0].clientY
          buttonDown = true
          doubleButtonDown = false
        }
        
      }
      img.ontouchmove = document.ontouchmove = function(event){
        if(doubleButtonDown){
          let distance = Math.pow((event.touches[1].clientX - event.touches[0].clientX),2) + Math.pow((event.touches[1].clientY-event.touches[0].clientY),2)
          if(distance - initDistance > 0){
            scaleBig()
          }else{
            scaleSmall()
          }
          return
        }
        if(!buttonDown) return
        let diffX = event.touches[0].clientX - startX
        let diffY = event.touches[0].clientY - startY
        img.style.left = startLeft + diffX + 'px'
        img.style.top = startTop + diffY + 'px'
        console.log(startTop)
      }
      img.ontouchend = document.ontouchend = function(event){
        startLeft = parseInt(img.style.left.replace("px",""))
        startTop = parseInt(img.style.top.replace("px",""))
        buttonDown = false
        doubleButtonDown = false
      }
    }


  </script> 
 </body>
</html>